<template>
  <div class="register">
    <a-card hoverable>
      <div class="content">
        <div class="photo">
          <img src="/register.svg"/>
        </div>
        <div class="info">
          <a-form :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 500px;">
            <a-form-item label="昵称：" v-bind="validateInfos.name">
              <a-input v-model:value="modelRef.name"/>
            </a-form-item>
            <a-form-item label="账号：" v-bind="validateInfos.account">
              <a-input v-model:value="modelRef.account"/>
            </a-form-item>
            <a-form-item label="密码：" v-bind="validateInfos.password">
              <a-input-password v-model:value="modelRef.password" />
            </a-form-item>
            <a-form-item label="邮箱：" v-bind="validateInfos.email">
              <a-input v-model:value="modelRef.email"/>
            </a-form-item>
            <a-form-item label="验证码：" v-bind="validateInfos.code">
              <a-input v-model:value="modelRef.code" style="width: calc(100% - 180px)"/>
              <a-button type="primary" :disabled="disabled" @click="sendCode" style="margin-left: 47px;">{{ code }}
              </a-button>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click.prevent="onSubmit">注册</a-button>
              <a-button style="margin-left: 150px" @click.prevent="router.push({name: 'login'})">返回</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {Form, message} from 'ant-design-vue';
import router from "@/router";
import axios from "@/axios";

const useForm = Form.useForm;

const labelCol = {span: 4};
const wrapperCol = {span: 14};

const modelRef = reactive({
  name: '',
  account: '',
  password: '',
  email: '',
  code: ''
});

const {validate, validateInfos} = useForm(
    modelRef,
    reactive({
      name: [
        {
          required: true,
          message: '请输入昵称',
        },
        {
          pattern: /^[^\s].*[^\s]$/,
          message: '不能以空格开头或结尾'
        }
      ],
      account: [
        {
          required: true,
          message: '请输入账号',
        },
        {
          pattern: /^[^\s].*[^\s]$/,
          message: '不能以空格开头或结尾'
        }
      ],
      password: [
        {
          required: true,
          message: '请输入密码',
        },
        {
          pattern: /^[^\s].*[^\s]$/,
          message: '不能以空格开头或结尾'
        },
        {
          min: 8,
          message: '长度不能小于8位'
        }
      ],
      email: [
        {
          required: true,
          message: '请输入邮箱',
        },
        {
          pattern: /^([a-zA-Z]|[0-9])(\w|)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
          message: "非法的邮箱"
        }
      ],
      code: [
        {
          required: true,
          message: '请输入验证码',
        },
        {
          pattern: /^[0-9]\d{5}$/,
          message: "验证码必须为6位整数"
        },
      ]
    }),
);

const onSubmit = () => {
  validate()
      .then(() => {
        axios.post(`/register/${modelRef.code}`, modelRef).then((response) => {
          message.success(response.message)
          router.push({name: 'login'})
        })
      })
      .catch(err => {
        console.log('error', err);
      });
};

let disabled = ref(false);

const sendCode = () => {
  // 指定要验证的属性，为空验证全部
  validate(['name', 'account', 'password', 'email']).then(() => {
    axios.post("/sendMsg", modelRef).then((response) => {
      message.success(response.message)
    })
    sub();
  })
};

const code = ref('发送验证码');
const wait = ref(60);
const sub = function time() {
  if (wait.value == 0) {
    code.value = "发送获取验证码";
    wait.value = 60;
    disabled.value = false;
  } else {
    disabled.value = true;
    code.value = wait.value + "秒后重新发送"
    wait.value--;
    setTimeout(function () {
      time()
    }, 1000)
  }
}
</script>

<style lang="less" scoped>

.register {
  margin: auto;
  //padding-top: 90px;
  width: 400px;
  display: flex;
  // 水平居中
  justify-content: space-around;
  align-items: center;

  .content {
    width: 1000px;
    height: 600px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    .photo {
      width: 600px;
      border-right: #7e8186 solid 1px;
    }

    .operate {
      display: flex;
      justify-content: space-around;
    }
  }
}

</style>
